<template>
  <div class="show">
    <div class="show-head">
      <el-button @click="handlechangelist(1)" v-if="drawer">推荐中</el-button>
      <el-button @click="handlechangelist(0)" v-else>未推荐</el-button>
    </div>
    <el-table :data="kilist" style="width: 100%">
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column label="图片">
        <template #default="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.img3"
            :preview-src-list="[
              scope.row.img1,
              scope.row.img2,
              scope.row.img3,
              scope.row.img4,
            ]"
            :initial-index="4"
            fit="cover"
            preview-teleported
            hide-on-click-modal
          />
        </template>
      </el-table-column>
      <el-table-column prop="proname" label="商品名称" />
      <el-table-column prop="brand" label="品牌" />
      <el-table-column prop="category" label="商品类别" />
      <el-table-column prop="originprice" label="价格" sortable />
      <el-table-column prop="discount" label="折扣" sortable />
      <el-table-column prop="sales" label="销量" sortable />
      <el-table-column prop="stock" label="库存" sortable />
      <el-table-column label="是否推荐">
        <template #default="{ row }">
          <el-switch
            v-model="row.isrecommend"
            style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
            "
            :active-value="1"
            :inactive-value="0"
            @change="handleUpdate(row.proid, 'isrecommend', row.isrecommend)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="danger">删除</el-button>
        </template>
      </el-table-column>

      <template #empty>
        <el-empty description="无数据" />
      </template>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total,prev, pager, next,"
        :total="recommendlist.length"
        v-model:current-page="page"
        v-model:page-size="pageSize"
      />
    </div>
  </div>
</template>

<script setup>
import { showdata, updateFlag } from "@/api/pro.js";
import { onMounted, ref, computed } from "vue";
const recommendlist = ref([]);
const page = ref(1);
const pageSize = ref(10);
const drawer = ref(true);

const kilist = computed(() => {
  return recommendlist.value.slice(
    (page.value - 1) * pageSize.value,
    page.value * pageSize.value
  );
});

function handlechangelist(num) {
  const obj = {
    type: "isrecommend",
    flag: num,
  };
  showdata(obj).then((data) => {
    recommendlist.value = data.data;
    drawer.value = !drawer.value;
  });
}

function handleUpdate(id, type, flag) {
  // console.log(scope, "scope");
  const obj = {
    proid: id,
    type: type,
    flag: flag,
  };
  // console.log(obj, "obj");
  updateFlag(obj).then((data) => {
    console.log(data);
  });
}
// function handleDetail(row) {
//   proItemdata(row.proid).then((data) => {
//     console.log(data);
//   });
// // }
// function handleEdit(row) {
//   console.log(row);
//   const obj = {
//     proid: row.proid,
//     type: "isseckill",
//     flag: !row.isseckill,
//   };
//   updateFlag(obj).then((data) => {
//     console.log(data);
//   });
//   const obj1 = {
//     type: "isseckill",
//     flag: row.isseckill,
//   };
//   showdata(obj1).then((data) => {
//     seckilllist.value = data.data;
//   });
// }

onMounted(() => {
  const obj = {
    type: "isrecommend",
    flag: 0,
  };
  showdata(obj).then((data) => {
    console.log(data);
    recommendlist.value = data.data;
  });
});
</script>

<style lang="scss" scoped>
.show {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  img {
    height: 80px;
  }
  .pagination,
  .show-head {
    padding: 10px 0;
    display: flex;
    justify-content: flex-end;
  }
  .el-table {
    flex: 1;
  }
}
</style>
